<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { ComCustomTab } from '../../types/com-custom-tab';
	import { numString } from '../../utils/util';
	import { DATA_MAIN_MINE_RECOMMEND_PEOPLE_DATA, DATA_MAIN_MINE_FUNCTION_DATA } from '../../utils/data';
	import { mainMineAppBarStyle, mainMineAppBarPaddingTopStyle, mainMinePaddingTopStyle, menuButtonBarHeight, webAppBarHeight, mainMineScrollViewStyle } from '../../utils/system';
	const mainTabIndex = ref(0)
	const handleChangeTabIndex = (index : number) => {
		mainTabIndex.value = index
	}
	const noteTabs : Array<ComCustomTab> = [{
		label: '公开 0',
	}, {
		label: '私密 0',
		icon: 'icon-lock'
	}, {
		label: '合集 0'
	}]
	const noteTabIndex = ref(0)
	const changeNoteTabIndex = (index : number) => {
		noteTabIndex.value = index
	}
	const appBarOpacity = ref(0)
	const showFixedTabBar = ref(false)
	const handleScroll = (e) => {
		let opacity = e.detail.scrollTop / 65
		appBarOpacity.value = Math.min(opacity, 1)
		if (e.detail.scrollTop >= fixedTabBarScrollTop.value && !showFixedTabBar.value) {
			showFixedTabBar.value = true
		} else if (e.detail.scrollTop < fixedTabBarScrollTop.value && showFixedTabBar.value) {
			showFixedTabBar.value = false
		}
	}
	const subTabBarData = ['me.notes', 'me.collects', 'me.likes']

	onMounted(() => {
		getScrollTop()
	})
	const fixedTabBarScrollTop = ref(0)
	import { getCurrentInstance } from 'vue';
	const getScrollTop = () => {
		const instance = getCurrentInstance();
		const query = uni.createSelectorQuery().in(instance.proxy);
		query.select('#mine-scroll-view').boundingClientRect()
		query.select('#mine-tabs-header').boundingClientRect()
		query.exec((res) => {
			if (res[0] && res[1]) {
				const scrollViewRect = res[0]
				const targetRect = res[1]
				let scrollTop = targetRect.top - scrollViewRect.top
				// #ifdef MP-WEIXIN
				scrollTop = scrollTop - menuButtonBarHeight
				// #endif
				// #ifdef MP-TOUTIAO
				scrollTop = scrollTop - menuButtonBarHeight
				// #endif
				// #ifdef WEB
				scrollTop = scrollTop - uni.upx2px(webAppBarHeight)
				// #endif
				// #ifdef APP
				scrollTop = scrollTop - uni.upx2px(webAppBarHeight)
				// #endif
				fixedTabBarScrollTop.value = scrollTop
			} else {
				console.log('不支持')
			}
		})
	}
	const scan = () => {
		uni.scanCode({
			onlyFromCamera: false,
		})
	}
	import { useI18n } from 'vue-i18n';
	const { t } = useI18n()
</script>
<template>
	<scroll-view class="main-mine-container" @scroll="handleScroll" scroll-y id="mine-scroll-view"
		:style="mainMineScrollViewStyle()">
		<view class="expand-container">
			<view class="mine-bar" :style="mainMineAppBarStyle(appBarOpacity)">
				<i class="iconfont icon-navicon"></i>
				<view class="right-part">
					<view class="setting-background"
						:style="{backgroundColor: `rgba(112, 110, 122, ${1 - appBarOpacity})`}">
						<i class="iconfont icon-_image"></i>{{t('me.editCoverPhoto')}}
					</view>
					<i class="iconfont icon-scan" @click="scan"></i>
					<i class="iconfont icon-24px"></i>
				</view>
			</view>
			<view class="user-container" :style="mainMinePaddingTopStyle()">
				<view class="avatar-container">
					<image src="/static/img1.png" mode="aspectFill" class="avatar-image"></image>
					<i class="add-button iconfont icon-add"></i>
				</view>
				<view class="username-container">
					<text class="username">小红书68407137</text>
					<text class="desc">小红书号：18958473157</text>
				</view>
			</view>
			<text class="profile">{{t('me.clickHereToFillInTheBio')}}</text>
			<view class="detail-container">
				<view class="user-data">
					<view class="flex-center">
						<view>0</view>
						<view>{{t('me.following')}}</view>
					</view>
					<view class="flex-center">
						<view>0</view>
						<view>{{t('me.followers')}}</view>
					</view>
					<view class="flex-center">
						<view>0</view>
						<view>{{t('me.likesCol')}}</view>
					</view>
				</view>
				<view class="actions">
					<view class="edit-profile">{{t('me.profile')}}</view>
					<view class="setting">
						<i class="iconfont icon-settings"></i>
					</view>
				</view>
			</view>
			<view class="recommend-people">
				<view class="header-container">
					<view class="left">
						<text class="title">你可能感兴趣的人</text>
						<i class="iconfont icon-info-circle"></i>
					</view>
					<i class="iconfont icon-close"></i>
				</view>
				<view class="people-scroll">
					<view v-for="(item, index) in DATA_MAIN_MINE_RECOMMEND_PEOPLE_DATA" :key="item.name"
						class="scroll-item">
						<view class="person-container flex-center">
							<image :src="item.avatar" mode="aspectFill" class="avatar"></image>
							<view class="name">{{item.name}}</view>
							<view class="fans">{{t('me.followers')}}{{numString(item.fans, 1)}}</view>
							<view class="focus">{{t('me.following')}}</view>
						</view>
						<view class="divider" v-if="index != 4"></view>
					</view>
				</view>
			</view>
			<view class="others-container">
				<view v-for="item in DATA_MAIN_MINE_FUNCTION_DATA" :key="item.title" class="other-block">
					<view class="title">{{item.title}}</view>
					<view class="desc">{{item.desc}}</view>
				</view>
			</view>
		</view>
		<view class="tabview-container" id="mine-tabs-header">
			<com-tabs-header :tabs="subTabBarData" :init-tab-index="0" @change="handleChangeTabIndex"
				class="com-tabs-header" :customStyle="true">
				<template #right>
					<i class="iconfont icon-a-searchbar_search"></i>
				</template>
			</com-tabs-header>
			<view class="com-tabs-header-bg" :style="`top: ${mainMineAppBarPaddingTopStyle()}`" v-if="showFixedTabBar">
				<com-tabs-header :tabs="subTabBarData" :init-tab-index="0" @change="handleChangeTabIndex"
					:customStyle="true">
					<template #right>
						<i class="iconfont icon-a-searchbar_search"></i>
					</template>
				</com-tabs-header>
			</view>
			<view class="tabview-note-container" v-if="mainTabIndex === 0">
				<com-custom-tab-bar :tabs="noteTabs" class="com-custom-tab-bar"
					@changeTabIndex="changeNoteTabIndex"></com-custom-tab-bar>
				<view class="tabview-note-public-content" v-if="noteTabIndex === 0">{{t('me.postMyPeelApartFilmForFree')}}</view>
			</view>
		</view>
	</scroll-view>
</template>
<style scoped lang="scss">
	@import "@/static/font/iconfont.css";

	.main-mine-container {
		height: 100%;

		.expand-container {
			background: linear-gradient(135deg, #2e3558 1%, #665056 40%);
			padding-bottom: 50rpx;

			.mine-bar {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding: 0rpx 31rpx;
				position: fixed;
				left: 0;
				width: 100%;
				z-index: 80;

				.icon-navicon {
					color: white;
					font-size: 45rpx;
				}

				.right-part {
					display: flex;
					flex-direction: row;
					align-items: center;
					color: white;
					gap: 30rpx;

					.setting-background {
						font-size: 16rpx;
						border-radius: 20rpx;
						height: 40rpx;
						line-height: 40rpx;
						width: fit-content;
						padding: 0 15rpx;
						color: white;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;

						.icon-_image {
							margin-right: 10rpx;
							font-size: 15rpx;
						}
					}
				}
			}

			.user-container {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;

				.avatar-container {
					margin: 20rpx 32rpx;
					position: relative;

					.avatar-image {
						width: 115rpx;
						height: 115rpx;
						border-radius: 100%;
					}

					.add-button {
						background-color: #fce94e;
						color: black;
						font-size: 12rpx;
						text-align: center;
						line-height: 30rpx;
						border-radius: 100%;
						width: 28rpx;
						height: 28rpx;
						font-weight: bold;
						position: absolute;
						bottom: 10rpx;
						right: 0;
					}
				}

				.username-container {
					display: flex;
					flex-direction: column;

					.username {
						font-size: 29rpx;
						color: white;
					}

					.desc {
						font-size: 15rpx;
						color: #8b808e;
						margin-top: 13rpx;
					}
				}


			}

			.profile {
				font-size: $font-size-20;
				color: white;
				margin-left: 31rpx;
			}

			.detail-container {
				font-size: $font-size-20;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding: 20rpx 31rpx;

				.user-data {
					color: white;
					display: flex;
					flex-direction: row;
					white-space: nowrap;
					gap: 50rpx;
				}

				.actions {
					display: flex;
					flex-direction: row;
					gap: 25rpx;
					color: white;

					&>view {
						height: 45rpx;
						line-height: 45rpx;
						background-color: #ffffff22;
						text-align: center;
						border-radius: 100rpx;
						border: 1rpx solid white;
						font-size: $font-size-20;
					}

					.edit-profile {
						width: 120rpx;
					}

					.setting {
						width: 60rpx;
					}
				}
			}

			.recommend-people {
				font-size: $font-size-20;
				margin: 31rpx;
				padding: 20rpx 0;
				color: white;
				background-color: #ffffff11;
				border-radius: 15rpx;

				.header-container {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					padding: 0 20rpx;

					.left {
						display: flex;
						flex-direction: row;
						align-items: center;

						.icon-info-circle {
							font-size: 20rpx;
							margin-left: 4rpx;
							color: #ffffffaa;
						}
					}

					.icon-close {
						color: #ffffffaa;
					}
				}

				.people-scroll {
					display: flex;
					flex-direction: row;
					white-space: nowrap;
					overflow: scroll;

					.scroll-item {
						display: flex;
						flex-direction: row;
						align-items: center;
						padding: 20rpx 0rpx 0rpx 0;

						.person-container {
							width: 190rpx;

							.avatar {
								width: 68rpx;
								height: 68rpx;
								border-radius: 100%;
								margin: 15rpx 0;
							}

							.name {
								color: white;
								font-size: $font-size-18;
							}

							.fans {
								color: #ffffffaa;
								font-size: $font-size-16;
								margin-top: 4rpx;
							}

							.focus {
								width: fit-content;
								padding: 3rpx 10rpx;
								line-height: 39rpx;
								background-color: #e8404a;
								color: white;
								text-align: center;
								border-radius: 100rpx;
								font-size: $font-size-18;
								margin: 15rpx 0;
							}
						}

						.divider {
							width: 1rpx;
							height: 100rpx;
							background-color: #ffffff22;
							display: inline-block;
						}
					}
				}
			}

			.others-container {
				margin: 40rpx 0 0rpx 31rpx;
				display: flex;
				flex-direction: row;
				overflow: scroll;
				white-space: nowrap;

				.other-block {
					border-radius: 10rpx;
					font-size: $font-size-22;
					display: inline-block;
					margin-right: 15rpx;
					background-color: #ffffff11;
					padding: 13rpx 19rpx;
					min-width: 218rpx;

					.title {
						color: white;
					}

					.desc {
						font-size: $font-size-18;
						color: #ffffffaa;
						margin-top: 10rpx;
					}
				}
			}
		}

		.tabview-container {
			background-color: white;
			border-radius: 20rpx;
			margin-top: -25rpx;
			width: 100%;

			.icon-a-searchbar_search {
				color: #909090;
				font-size: 32rpx;
				margin-bottom: 10rpx;
			}

			.tabview-note-container {
				.tabview-note-public-content {
					text-align: center;
					width: 100%;
					height: 2300rpx;
					line-height: 2300rpx;
					font-size: $font-size-24;
				}
			}

			.com-tabs-header-bg {
				position: fixed;
				left: 0;
				right: 0;
				background-color: #665056;
			}
		}
	}
</style>